"use client";
import React, { useImperativeHandle } from "react";
import { Swipeable } from "../gesture";
import MediaViewer from "./media-viewer";
interface IProps {
    type: string;
    name?: string;
    src: string;
    footer?: React.ReactNode;
    onSwipe?: (dir: "left" | "right") => void;
}
const MediaListViewer: React.ForwardRefRenderFunction<never, IProps> = (
    props,
    forwardedRef
) => {
    const { name, type, src, footer = null, onSwipe = () => {} } = props;

    const renderMedia = () => {
        if (type === "Image") {
            return;
        }

        if (type === "Video") {
            return (
                <>
                    <video className="media-" controls muted preload="metadata">
                        <source src={src} type="video/mp4" />
                        Your browser does not support the video tag.
                    </video>
                </>
            );
        }
    };
    useImperativeHandle(forwardedRef, () => null);
    return (
        <Swipeable
            onSwipe={onSwipe}
            render={(index: number) => {
                return <MediaViewer />;
            }}
        ></Swipeable>
    );
};
export default React.memo(React.forwardRef(MediaListViewer));
